frontend/pages/e/[uuid]/waitingList.tsx (view raw)
1import {useState, useMemo, PropsWithChildren} from 'react';
2import EventLayout, {TabComponent} from '../../../layouts/Event';
3import {EventByUuidDocument} from '../../../generated/graphql';
4import useProfile from '../../../hooks/useProfile';
5import WaitingList from '../../../containers/WaitingList';
6import {AddPassengerToWaitingList} from '../../../containers/NewPassengerDialog';
7import pageUtils from '../../../lib/pageUtils';
8import Box from '@mui/material/Box';
9import SupportCaroster from '../../../containers/SupportCaroster';
10
11interface NewPassengerDialogContext {
12 addSelf: boolean;
13}
14
15interface Props {
16 eventUUID: string;
17 announcement?: string;
18}
19
20const Page = (props: PropsWithChildren<Props>) => {
21 return <EventLayout {...props} Tab={WaitingListTab} />;
22};
23
24const WaitingListTab: TabComponent = ({event}) => {
25 const {userId} = useProfile();
26 const [addPassengerToWaitingListContext, toggleNewPassengerToWaitingList] =
27 useState<NewPassengerDialogContext | null>(null);
28
29 const canAddSelf = useMemo(() => {
30 if (!userId) return false;
31 const isInWaitingList = event?.waitingPassengers?.data?.some(
32 passenger => passenger.attributes.user?.data?.id === `${userId}`
33 );
34 const isInTravel = event?.travels?.data?.some(travel =>
35 travel.attributes.passengers?.data?.some(
36 passenger => passenger.attributes.user?.data?.id === `${userId}`
37 )
38 );
39 return !(isInWaitingList || isInTravel);
40 }, [event, userId]);
41
42 return (
43 <>
44 <WaitingList
45 canAddSelf={canAddSelf}
46 getToggleNewPassengerDialogFunction={(addSelf: boolean) => () =>
47 toggleNewPassengerToWaitingList({addSelf})}
48 />
49 <Box mt={4} display="flex" justifyContent="center">
50 <SupportCaroster />
51 </Box>
52 {!!addPassengerToWaitingListContext && (
53 <AddPassengerToWaitingList
54 open={!!addPassengerToWaitingListContext}
55 toggle={() => toggleNewPassengerToWaitingList(null)}
56 addSelf={addPassengerToWaitingListContext.addSelf}
57 />
58 )}
59 </>
60 );
61};
62
63export const getServerSideProps = pageUtils.getServerSideProps(
64 async (context, apolloClient) => {
65 const {uuid} = context.query;
66 const {host = ''} = context.req.headers;
67 let event = null;
68
69 // Fetch event
70 try {
71 const {data} = await apolloClient.query({
72 query: EventByUuidDocument,
73 variables: {uuid},
74 });
75 event = data?.eventByUUID?.data;
76 } catch (error) {
77 return {
78 notFound: true,
79 };
80 }
81
82 return {
83 props: {
84 eventUUID: uuid,
85 metas: {
86 title: event?.attributes?.name || '',
87 url: `https://${host}${context.resolvedUrl}`,
88 },
89 },
90 };
91 }
92);
93
94export default Page;